<template>
  <view>
    <view
      class="cu-modal bottom-modal"
      :class="modalNameDetail == 'bottomModal' ? 'show' : ''"
      @tap="hideModal"
    >
      <view class="cu-dialog" @tap.stop="">
        <view class="cu-bar bg-white">
          <view class="action text-green" @tap="confirm">确定</view>
          <view class="action text-blue" @tap="hideModal">取消</view>
        </view>
        <view class="container">
          <scroll-view
            class="scroll-region"
            scroll-y
            @scrolltolower="loadMore"
            :scrolltolower-enabled="true"
          >
            <!-- 展示caiLiaoData的数据，以卡片的形式展示，每个卡片的左侧的第一项是一个复选框按钮 -->
            <view class="cu-list menu-avatar">
              <view
                class="cu-item"
                v-for="(item, index) in list"
                :key="item.id"
              >
                <view class="cu-avatar">
                  <checkbox
                    :checked="item.checked"
                    @click="checkSelect(item)"
                  />
                </view>

                <view class="content">
                  <view class="text-black flex"
                    >创建时间：{{ item.createtime }}</view
                  >
                  <view class="text-black flex">工程名称：{{ item.name }}</view>
                  <view class="text-black flex"
                    >工程编码：{{ item.pcode }}</view
                  >
                  <view class="text-black flex">变更编码：{{ item.sno }}</view>
                  <view class="text-black flex"
                    >材料编码：{{ item.mcode }}</view
                  >
                  <view class="text-black flex"
                    >物料名称：{{ item.mname }}</view
                  >
                  <view class="text-black flex">规格型号：{{ item.mstd }}</view>
                  <view class="text-black flex">数量：{{ item.num }}</view>
                  <view class="text-black flex">单位：{{ item.unit }}</view>
                  <!-- <view class="text-black flex">
                                        材料名称：{{item.caiLiaoName}}
                                    </view>
                                    <view class="text-gray flex">
                                        <view >规格型号：{{item.caiLiaoGuiGe}}</view>
                                    </view> -->
                </view>
              </view>
            </view>
            <u-empty v-if="!list.length"></u-empty>
            <view v-if="list.length" class="loadmore">
              <u-loadmore :status="loadStatus"></u-loadmore>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    modalNameDetail: {
      type: String,
      default: "bottomModal",
    },
    pcode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // modalName:'bottomModal',
      imgList: [],
      date: "2018-12-25",
      modalName: null,
      checkbox: [
        {
          value: "A",
          checked: true,
        },
        {
          value: "B",
          checked: true,
        },
        {
          value: "C",
          checked: false,
        },
      ],
      loadStatus: "loadmore",
      list: [],
      checkedList: [],
    };
  },
  created() {
    console.log(this.modalNameDetail, "modalNameDetail");

    this.loadData();
  },
  methods: {
    checkSelect(item) {
      item.checked = !item.checked;
      console.log(item.checked, item);
    },
    loadMore() {
      this.loadStatus = "loading";
      setTimeout(() => {
        this.query.pageNo += 1;
        this.loadData("add");
      }, 100);
    },
    loadData(type) {
      this.query = {
        bmain: 1,
        pcode: this.pcode,
      };
      console.log(this.query, "query");
      this.$u.api.zfgs.pmMaterialListData(this.query).then((res) => {
        if (res.list.length >= 0) {
          // this.xmList = res.list
          if (res.list.length < 20 || res.list.length == 0) {
            this.loadStatus = "nomore";
          }
          var data = res.list;
          //模拟收藏
          data.forEach((item, index) => {
            // 添加isStar 属性 随机2.5.8属性为true,其他为false
            item.checked = false;
          });
          console.log(this.loadStatus, "this.loadStatus");
          if (this.loadStatus == "nomore") {
            this.list = data;
          } else {
            if (type == "add") {
              for (var i = 0; i < data.length; i++) {
                this.list.push(data[i]);
              }
            } else {
              this.list = data;
            }
          }
        }
      });
    },
    showModal() {
      // this.modalName = 'bottomModal'
      this.$emit("modalNameDetailEmit", "bottomModal");
    },
    hideModal() {
      // this.modalName = null
      this.$emit("modalNameDetailEmit", null);
    },
    ViewImage(e) {
      uni.previewImage({
        urls: this.imgList,
        current: e.currentTarget.dataset.url,
      });
    },
    DelImg(e) {
      uni.showModal({
        title: "",
        content: "确定要删除吗？",
        cancelText: "取消",
        confirmText: "确认",
        success: (res) => {
          if (res.confirm) {
            this.imgList.splice(e.currentTarget.dataset.index, 1);
          }
        },
      });
    },
    ChooseImage() {
      uni.chooseImage({
        count: 4, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], //从相册选择
        success: (res) => {
          if (this.imgList.length != 0) {
            this.imgList = this.imgList.concat(res.tempFilePaths);
            this.$u.toast("上传成功");
          } else {
            this.imgList = res.tempFilePaths;
          }
        },
      });
    },
    DateChange(e) {
      this.date = e.detail.value;
    },
    confirm() {
      this.$u.toast("确认成功");
      this.list.forEach((item) => {
        if (item.checked) {
          this.checkedList.push(item);
        }
      });
      if (this.checkedList.length == 0) {
        this.$u.toast("请选择材料");
        return;
      }
      this.$emit("checkedListEmit", this.checkedList);
      this.$emit("modalNameDetailEmit", "");
    },
    textareaAInput(e) {},
  },
};
</script>
<style scoped lang="scss">
.cu-modal {
  z-index: 998;
  text-align: left;
}
.container {
  display: flex;
  flex-direction: column;
}
.scroll-region {
  width: 100%;
  height: 200px; /* 设置滚动区域的高度 */
  overflow-y: auto; /* 仅允许垂直滚动，也可用scroll-y代替 */
}
.cu-avatar {
  background: #fff;
}
.cu-item {
  height: 260px !important;
}
</style>
